<!doctype html>
<html lang="en">
  <head>
    <title>SparqlTree : Examples : DBPedia : Populations</title>
    <meta charset="utf-8" />
    <!--[if IE lt 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="../src/oort/sparqltree.js"></script>
    <script>

      function sparql(endpoint, query, callback, error) {
        $.ajax({
          type: "GET", url: endpoint,
          beforeSend: function(req) {
            req.setRequestHeader("Accept", "application/sparql-results+json");
          },
          data: {query: query}, dataType: 'json',
          success: callback, error: error
        });
      }


      var dur = 1000;
      function fadeOut() {
        $(this).animate({'opacity': 0.2}, {queue: true, duration: dur, complete: fadeIn});
      }
      function fadeIn() {
        $(this).animate({'opacity': 1}, {queue: true, duration: dur, complete: fadeOut});
      }
      function startLoad(o) {
        return fadeOut.apply(o.addClass('loading')[0]);
      }
      function stopLoad(o) {
        return o.stop(true).removeClass('loading').css('opacity', 1);
      }

      $(function () {

        var endpoint = $('#endpoint').val();

        $('#execute').click(function () {
          var query = $('#sparql').val();
          startLoad($('#results'));
          sparql(endpoint, query, function (data, statusText, req) {
            var results = stopLoad($('#results'));
            var tree = SparqlTree.buildTree(data);
            results.text(JSON.stringify(tree, null, 2));
          }, function (xhr) {
            alert(xhr.responseText);
          });
        });

      });

    </script>
    <style>

      article, aside, figure, footer, header, hgroup, menu, nav, section {
        display: block;
      }

      body {
        font-family: arial;
        font-size: 9pt;
      }

      a {
        color: #707;
        font-weight: bold;
        text-decoration: none;
      }

      label {
        font-weight: bold;
      }

      #query-wrapper > h2, #results-wrapper > h2 {
        margin: 0.3em 0 0.6em;
      }

      #query-wrapper, #results-wrapper {
        padding-top: 0.1em;
      }

      #query-wrapper {
        float: left;
        width: 46em;
      }

      #results-wrapper {
        margin-left: 46em;
      }

      input, textarea, #results {
        background-color: #fffaee;
        border: 1px solid #ccc;
        font-family: courier;
        font-size: 9pt;
        overflow: auto;
        white-space: pre;
      }

      #results.loading {
        background-color: #e0e0e0;
      }

    </style>
  </head>
  <body>
    <h1>
      <a href="http://purl.org/oort/wiki/SparqlTree">SparqlTree</a>
      : Examples : DBPedia : Populations
    </h1>
    <section id="query-wrapper">
      <h2>Query</h2>
      <div id="query">
        <p>
          <label for="endpoint">Endpoint:</label>
          <input id="endpoint" size="42" value="http://dbpedia.org/sparql" />
          <em>(Must support <a href="http://www.w3.org/TR/cors/">CORS</a>)</em>
        </p>
        <div>
          <label for="sparql">SPARQL:</label>
        </div>
        <textarea id="sparql" cols="72" rows="28">
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX dbpprop: <http://dbpedia.org/property/>
PREFIX dbpowl: <http://dbpedia.org/ontology/>

SELECT * {

  ?country a dbpowl:Country;
    rdfs:label ?country__1_label .

  FILTER(LANG(?country__1_label) = 'en')

  OPTIONAL {
    ?country
      dbpprop:populationCensus ?country__1_populationCensus;
      dbpprop:populationCensusYear ?country__1_populationCensusYear .
  }
  OPTIONAL {
    ?country
      dbpprop:populationEstimate ?country__1_populationEstimate;
      dbpprop:populationEstimateYear ?country__1_populationEstimateYear .
  }

}
LIMIT 100
        </textarea>
        <p>
          <button id="execute">Run query</button>
        </p>
      </div>
    </section>
    <section id="results-wrapper">
      <h2>Results</h2>
      <div id="results">
      </div>
    </section>
  </body>
</html>
